<template>
	<view class="container">
		<Navigator3></Navigator3>
		<view class="content">
			<!-- 用户信息卡片 -->
			<view class="user-card" @click="naviToAccountInfoPage">
				<image class="avatar" :src="avatar ? avatar : '/static/me_man.png'"></image>
				<view class="user-info">
					<text class="username">{{ username || $t('me.unNamed') }}</text>
					<text class="phone">{{ $t('me.loginPhone') }}：{{ phone }}</text>
				</view>
				<image class="arrow" src="/static/me_rightcursor.png"></image>
			</view>
			
			<!-- 菜单项 -->
			<view class="menu-section">
				<view class="menu-item">
					<image class="menu-icon" src="/static/me_agent.png"></image>
					<text class="menu-text">{{ $t('me.customerService') }}</text>
					<image class="arrow" src="/static/me_rightcursor.png"></image>
				</view>
				
				<view class="menu-item" @click="naviToSettingPage">
					<image class="menu-icon" src="/static/me_setting.png"></image>
					<text class="menu-text">{{ $t('me.systemSetting') }}</text>
					<image class="arrow" src="/static/me_rightcursor.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Navigator3 from '@/components/Navigator3.vue'
	import util from '@/js/util'
	export default {
		data() {
			return {
				username: '',
				phone: '',
				avatar: ''
			}
		},
		onShow() {
			if (!util.isLogin()) {
				uni.navigateTo({url:'/pages/login/login'})
				return
			}
			this.username = uni.getStorageSync('userInfo').username
			this.phone = util.desensitizePhone(uni.getStorageSync('userInfo').phone)
			this.avatar = uni.getStorageSync('userInfo').avatar
		},
		methods: {
			clearSession() {
				uni.removeStorageSync('sy-token')
				uni.removeStorageSync('userInfo')
			},
			naviToAccountInfoPage() {
				uni.navigateTo({
					url: '/pages/me/accountinfo'
				})
			},
			naviToSettingPage() {
				uni.navigateTo({
					url: '/pages/me/setting'
				})
			}
		},
		components: {
			Navigator3
		}
	}
</script>

<style lang="scss">
/* 全局样式 */
page {
	background-color: #F1F2F5;
}
</style>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F1F2F5;
		
		.content {
			padding: 116px 16px 16px 16px;
			
			.user-card {
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 8px;
				padding: 20px;
				margin-bottom: 16px;
				box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
				
				.avatar {
					width: 58.29px;
					height: 58.29px;
					border-radius: 58px;
					margin-right: 16px;
					flex-shrink: 0;
					background: #F7F9FC;
				}
				
				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					
					.username {
						font-size: 20px;
						font-weight: 600;
						color: #1F2937;
						margin-bottom: 8px;
					}
					
					.phone {
						font-size: 12px;
						color: #707A89;
					}
				}
				
				.arrow {
					width: 8px;
					height: 14px;
					flex-shrink: 0;
				}
			}
			
			.menu-section {
				background-color: #FFFFFF;
				border-radius: 12px;
				margin-bottom: 32px;
				
				.menu-item {
					display: flex;
					align-items: center;
					padding: 16px 20px;
					border-bottom: 1px solid #F3F4F6;
					
					&:last-child {
						border-bottom: none;
					}
					
					.menu-icon {
						width: 14px;
						height: 14px;
						margin-right: 16px;
						flex-shrink: 0;
					}
					
					.menu-text {
						flex: 1;
						font-size: 16px;
						color: #1F2937;
					}
					
					.arrow {
						width: 8px;
						height: 14px;
						flex-shrink: 0;
					}
				}
			}
			
			.clear-button {
				width: 100%;
				background-color: #FFFFFF;
				color: #DC2626;
				font-size: 16px;
				border: none;
				border-radius: 12px;
				padding: 6px 16px;
				margin-top: 16px;
			}
		}
	}
</style>
